<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.order_sn" placeholder="订单号" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.real_name" placeholder="姓名" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.mobile" placeholder="手机号码" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.idcard" placeholder="身份证号码" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.is_paid" placeholder="支付状态" class="filter-item">
        <el-option label="所有" value="" />
        <el-option label="未付款" value="0" />
        <el-option label="已付款" value="1" />
        <el-option label="待审核" value="2" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="ID" prop="id" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_sn }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户姓名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.real_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证号码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.idcard }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商户名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.merchant_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.project_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="债权总额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.total_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分期数" align="center">
        <template slot-scope="{row}">
          <span>{{ row.total_period }}</span>
        </template>
      </el-table-column>



      <el-table-column label="签单人" class-name="status-col">
        <template slot-scope="{row}">
          {{ row.sale_name}}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button size="mini" type="danger" @click="payment(row.order_id)">
            用户还款计划
          </el-button>
          <el-button size="mini" type="primary" @click="merchant(row.order_id)">
            商家付款计划
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>
<script>
  import {
    getOrderPaymentNormalList,
    setCollectionMember
  } from '@/api/collection'
  import {
    formatDate
  } from '@/utils/formatDate.js'
  import waves from '@/directive/waves' // waves directive
  import {
    parseTime
  } from '@/utils'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  export default {
    name: 'NormalTable',
    components: {
      Pagination
    },
    directives: {
      waves
    },
    filters: {
      formatDate(time) {
        time = time * 1000
        let date = new Date(time)

        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      }
    },
    data() {
      return {

        tableKey: 0,
        tableRecord: 1,
        list: null,


        listRecordLoading: true,
        recordTotal: 0,
        total: 0,

        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          real_name: '',
          mobile: '',
          idcard: '',
          is_paid: ''

        },
        listRecordQuery: {
          page: 1,
          limit: 20,
          order_id: ''
        },
        dialogRecordVisible: false,
        dialogStatus: '',
        downloadLoading: false
      }
    },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getOrderPaymentNormalList(this.listQuery).then(response => {
        this.list = response.data.payment.list
        this.total = response.data.payment.count
        this.sale_list = response.data.sale
        setTimeout(() => {
          this.listLoading = false
        }, 1.0 * 1000)
      })
    },

    payment(order_id) {
      this.$router.push('payment/' + order_id)
    },
    merchant(order_id) {
      this.$router.push('merchant/' + order_id)
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>

<style>
</style>
